<template>
  <div class="user-avator-dropdown">
    <Dropdown @on-click="handleClick">
      <Avatar v-if="userAvator!==''"
              :src="userAvator" />
      <img v-else
           class="img-avator"
           src="@/assets/images/userAvatar.jpg" />
      <Icon :size="18"
            type="md-arrow-dropdown"></Icon>
      <DropdownMenu slot="list">

        <DropdownItem name="userInfo">个人中心</DropdownItem>
        <DropdownItem name="logout">退出登录</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script>
import "./user.less";
import { mapActions } from "vuex";
export default {
    name: "User",
    props: {
        userAvator: {
            type: String,
            default: ""
        }
    },
    methods: {
        ...mapActions(["handleLogOut"]),
        handleClick(name) {
            switch (name) {
                case "userInfo":
                    this.$router.push({
                        name: "userInfo"
                    });
                    break;
                case "logout":
                    this.handleLogOut().then(() => {
                        this.$router.push({
                            name: "login"
                        });
                    });
                    break;
            }
        }
    }
};
</script>
